<template>
  <tm-sheet color="#f5f5f5" :padding="[0, 20]" :margin="[0]">
    <tm-form
      v-model="formData"
      :label-width="220"
      :padding="[0]"
      :margin="[0]"
      :round="0"
      class="primaryForm-wrap"
    >
      <tm-form-item
        v-for="(item, index) in fields"
        :key="index"
        :label="item.name"
        :field="item.id"
        :show-error="false"
      >
        <tm-input
          :ready-only="true"
          :inputPadding="[20, 0]"
          :model-value="isLoading ? '加载中...' : formData[item.id]"
          :transprent="true"
          align="right"
          disabled
          placeholder="-"
        >
        </tm-input>
      </tm-form-item>
    </tm-form>
  </tm-sheet>
</template>

<script lang="ts" setup>
import { Ref, ref, onMounted } from 'vue'
import { CustomFormType } from '../../workTypes'
import { FieldModel } from '@/ts/base/model'
import WorkCtrl from '../../common'
import * as dayjs from '../../../../tmui/tool/dayjs/esm/index'
import { model } from '@/ts/base'
const DayJs = dayjs.default

type IProps = {
  formInfo: CustomFormType
}

const props = defineProps<IProps>()
const fieldDatas = (props.formInfo?.fields || []).filter(
  field => field.options?.hideField !== true
)

const fields: Ref<FieldModel[]> = ref(fieldDatas)
const formData = ref<Record<string, any>>(
  props.formInfo?.data[0].after[0] ?? {}
)
const isLoading = ref<boolean>(true)
const getFullPath = (lookups: model.XLookup[], targetValue: string): string => {
  const valueNode = lookups.find(item => item.value === targetValue)
  if (!valueNode) return ''

  const path: string[] = [valueNode.text]
  let currentNode = valueNode

  while (currentNode.parentId) {
    const parentNode = lookups.find(item => item.id === currentNode.parentId)
    if (!parentNode) break
    path.unshift(parentNode.text)
    currentNode = parentNode
  }

  return path.join('/')
}
const getFieldText = async (field: FieldModel) => {
  const _value = formData.value[field.id]
  switch (field.valueType) {
    case '日期型':
      return DayJs(_value).format('YYYY-MM-DD HH:mm:ss')
    case '时间型':
      return DayJs(_value).format(' HH:mm:ss')
    case '描述型':
    case '数值型':
      return _value ?? '-'
    case '选择型':
      return field.lookups!.find(v => v.value === _value)?.text
    case '分类型':
      return getFullPath(field.lookups!, _value)
    case '用户型':
      return (await loadUserInfo(_value))?.name
    case '附件型':
    case '引用型':
      return JSON.parse(_value).map(d => d.name)
    default:
      return _value ?? '-'
  }
}

/** 加载所有数据 */
const loadData = async () => {
  const updatedFormData = { ...formData.value }
  for (const item of fields.value) {
    if (formData.value[item.id]) {
      updatedFormData[item.id] = await getFieldText(item)
    }
  }
  formData.value = updatedFormData
  isLoading.value = false
}

/** 加载用户型信息 */
const loadUserInfo = async (id: string) => {
  try {
    const user = await WorkCtrl.findWorkEntityAsync(id)
    if (user) {
      return user
    }
  } catch (error) {
    return null
  }
}

onMounted(() => {
  loadData()
})
</script>

<style lang="scss" scoped></style>
